﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>vue购物车地址订单详情代码 - 站长素材</title>

<!--css类引用-->
<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="plugins/layui/css/layui.css" />
<link rel="stylesheet" href="plugins/awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="plugins/eleme-ui/index.css" />
<link rel="stylesheet" href="css/CivilMilitaryIntegration/public.css" />
<link rel="stylesheet" href="css/CivilMilitaryIntegration/ShoppingCartAdress.css" />

</head>
<body>
<!--toper 公用-->

<!--主要内容-->
<div class="row" id="myVue"  v-cloak>
	<div class="col-lg-10 col-lg-offset-1" ><br>
		<div class="contenter">
			<ul>
				<li>
					<el-row>
						<span class="addAddressCons">收货人信息</span>
						<span class="addAddress" @click="AddressShowClick">新增收货地址</span>
					</el-row>
					<div class="scolleShow" >
					<el-row  class="consignee" v-for="(items,index) in filterAddress"  >
						<div v-on:mouseout="MouseOutList(items)" v-on:mouseleave="MouseOverList(items)">
							<el-col :span='4'>
								<div class="consigneeList consigneeListWidth"  :class="{'consigneeListClick':items.addressDefult}" @click="currentIndexClick(items,index)">
									<span v-text="items.name"></span>
									<span v-text="items.city"></span>
									<div v-show="items.addressDefult">
										<div class="arrow-right"></div>
										<i class="fa fa-check" aria-hidden="true"></i>
									</div>
								</div>
							</el-col>
							<el-col class='rightAddress'  :span='20' :class='{BackColor:items.addressIsShow}'>
								<span v-text="items.name"></span>
								<span v-text="items.city"></span>
								<span v-text="items.area"></span>
								<span v-text="items.minarea"></span>
								<span v-text="items.phone"></span>
								<span v-if='items.isShowDefult' class="addressDefultClass">默认地址</span>
								<span v-if='items.addressIsShow' class='edmitAddre' >
									<span class='edmitSpan' @click="defultAddress(items)">设为默认地址</span>
									<span class='edmitSpan' @click="emitAddress(items,index)">编辑</spa>
								</span>
								<span v-if='!items.isShowDefult' @click="deleAddressAlert(index)" class='edmitSpan edmitSpan-delete' >删除</span>
							</el-col>
							<div class="clearfix"></div>
						</div>
					</el-row>
					</div>
					<el-dialog
						title="新增收货地址"
						:visible.sync="newAddressShow"
						width="30%"
						>
						<el-form ref="form" :model="form" label-width="80px">
							<el-form-item label="收货人" >
								<el-input v-model="form.name" placeholder="请输入内容"></el-input>
							</el-form-item>
							<el-form-item label="所在地区" >
								<el-input v-model="form.city" placeholder="请输入内容"></el-input>
							</el-form-item>
							<el-form-item label="详细地址" >
								<el-input v-model="form.minarea" placeholder="请输入内容"></el-input>
							</el-form-item>
							<el-form-item label="手机号码" >
								<el-input v-model="form.phone" placeholder="请输入内容"></el-input>
							</el-form-item>
							<el-form-item>
								<el-checkbox-group v-model="form.isShowDefult">
									<el-checkbox  label="设为默认地址" name="type">设为默认地址</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="dialogVisible = false" type='danger'>取 消</el-button>
							<el-button type="primary" @click="saveNewAdress(edmitType)">保存</el-button>
						</span>
					</el-dialog>
					<div v-if='!moreAddressData.length == 0' class="muchAddress">
						<span @click="moreAddress">更多地址
							<transition name="fade"  mode="out-in">
								<i key='up' v-if='isTranShow' class="fa fa-angle-double-down" ></i>
								<i key='down' v-else class="fa fa-angle-double-up" ></i>
							</transition>
						</span>
					</div>
					<div v-if='moreAddressData.length == 0' class="noAddress" >
						<span>您还没有收货地址，请增加新的收货地址！</span>
					</div>
				</li>
				<li>
					<span class="addAddressCons">支付方式</span>
					<div class="consignee">
						<span class="consigneeList" v-for="(paymentDatas,index) in paymentdatas" :class="{'consigneeListClick':paymentIndex == index}" @click="paymentIndex=index">
							<span v-text="paymentDatas.name"></span>
							<div v-show="paymentIndex == index">
								<div class="arrow-right"></div>
								<i class="fa fa-check" aria-hidden="true"></i>
							</div>
						</span>
					</div>
				</li>
				<li>
					<span class="addAddressCons">送货清单</span>
					<span class="addAddress"><a href="ShoppingCart.html">返回修改购物车</a></span>
					<div class="row deliverymode">
						<div class="col-lg-3 deliverymodeLeft">
							<p>配送方式：</p>
							<div v-for="(deliverymodeDatas,index) in deliverymodedatas"  >
								<span class="consigneeList" @click="deliverymodeIndex=index" :class="{'consigneeListClick':deliverymodeIndex == index}">
									<span v-text="deliverymodeDatas.type" ></span>
									<div v-show="deliverymodeIndex == index">
										<div class="arrow-right"></div>
										<i class="fa fa-check" aria-hidden="true"></i>
									</div>
								</span>
								<p class="deliverymodeLeftTit" v-text="deliverymodeDatas.name"></p>
							</div>
						</div>
						<div class="col-lg-9 deliverymodeRight" >
							<div class="layui-form">
							  <table class="layui-table">
								  <tr>
									<td>
										<span class="goodName">
											<img class="goodImg" src="img/CivilMilitaryIntegration/CooperationZone/panner0.jpg" />
										</span>
										<span class="goodName goodsName">
											<h2 class="goodname"></h2>
											<p class="goodGary">
												<span>供应商：</span>
												<span>美国</span>
											</p>
											<p class="goodGary">
												<span>发货地：</span>
												<span>中国</span>
											</p>
										</span>
									</td>
									<td class="goodPrice">￥344534.00</td>
									<td class="goodNum">1</td>
								  </tr>
								  <tr>
									<td>
										<span class="goodName">
											<img class="goodImg" src="img/CivilMilitaryIntegration/CooperationZone/panner0.jpg" />
										</span>
										<span class="goodName goodsName">
											<h2 class="goodname"></h2>
											<p class="goodGary">
												<span>供应商：</span>
												<span>美国</span>
											</p>
											<p class="goodGary">
												<span>发货地：</span>
												<span>中国</span>
											</p>
										</span>
									</td>
									<td class="goodPrice">￥344534.00</td>
									<td class="goodNum">1</td>
								  </tr>
								  
							  </table>
							</div>
						</div>
					</div>
				</li>
				<li>
					<span class="addAddressCons">发票信息</span>
					<div class="consignee">
						<span class="consigneeList" v-for="(invoiceDatas,index) in invoicedatas" :class="{'consigneeListClick':invoiceIndex == index}" @click="invoiceIndex=index">
							<span v-text="invoiceDatas.name"></span>
							<div v-show="invoiceIndex == index">
								<div class="arrow-right"></div>
								<i class="fa fa-check" aria-hidden="true"></i>
							</div>
						</span>
					</div>
					<div class="consignee" v-if="invoiceIndex > 0">
						<span class="CompanyInformation">增值税普通发票</span>
						<span class="CompanyInformation">北京科技公司</span>
						<span class="CompanyInformation">货物详细</span>
						<span class="CompanyInformation modify">修改</span>
					</div>
					
				</li>
				<li class="couponconts">
					<span class="addAddressCons ">使用优惠券</span>
					<div class="consignee couponcontShow" >
						<span class="coupon" v-for="(CouponDatas,index) in Coupondatas" :class="{'consigneeListClick':CouponIndex == index}" @click="CouponIndexClcik(index,CouponDatas.price)">
							<div class="couponDiv" :class="{'couponDivClick':CouponIndex == index}">
								<p class="couponprice">{{CouponDatas.price | moneyFiler}}</p>
								<p class="coupontime" v-text="'有效期至'+CouponDatas.time"></p>
							</div>
							<span class="coupontype" :class="{'coupontypeClick':CouponIndex == index}">
								<span v-text="CouponDatas.type"></span>
								<span v-text="CouponDatas.types"></span>
							</span>
							<div v-show="CouponIndex == index">
								<div class="arrow-right"></div>
								<i class="fa fa-check" aria-hidden="true"></i>
							</div>
						</span>
					</div>
				</li>
			</ul>
			<div class="row totalRow">金额抵用：{{couponPrice | moneyFiler}}</div>
		</div>
		<div class="contenterFooter">
			<p>1件商品，1项服务，总金额：<span class="footerPrice">￥9600.00</span></p>
			<p>运费：<span class="footerPrice">￥100.00</span></p>
			<p>优惠：<span class="footerPrice footercouponPrice">{{couponPrice | moneyFiler}}</span></p>
		</div>
		<div class="clearfix"></div>
		<div class="row footerRow">
				<span class="footerRowprice">应付金额：<span>￥9999.00</span></span>  
				<span class="footerRowaddress"><span>商品收获地址：{{moreaddressCity + moreaddressArea + moreaddressMinarea}}</span><span>{{moreaddressName}}</span><span>13800138000</span></span>
		</div>
		<button class="btn submitForm">提交订单</button>
	</div>
	
	
</div>

<!--js类引用-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="plugins/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="plugins/vue/vue.js"></script>
<script type="text/javascript" src="plugins/eleme-ui/index.js"></script>
<script type="text/javascript" src="js/CivilMilitaryIntegration/ShoppingCart.js"></script>
<!--<script type="text/javascript" src="js/CivilMilitaryIntegration/abc.js" ></script>-->

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>